<template>
  <div class="map-page" >
    <div id="map-container"></div>
    <!-- <button @click="guanbi">关闭</button> -->
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted ,ref} from 'vue'
import {borderData,limitTip} from './data/shunyi-border'
let map = null

onMounted(async () => {
  AMapLoader.load({
    key: 'b4bd14d49257b473cbde7a397a64b214', //申请好的Web端开发者 Key，调用 load 时必填
    version: '2.0' //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })

  const AMap = await AMapLoader.load({
    //可多次调用load
    plugins: ['AMap.Driving', 'AMap.PolygonEditor', 'AMap.Text']
  })

  //基本地图加载
  map = new AMap.Map('map-container', {
    resizeEnable: true,
    center: [116.397428, 39.90923], //地图中心点
    zoom: 13 //地图显示的缩放级别
  })

  driving(AMap)

  drawLine(AMap)
})

const driving = (AMap) => {
  //构造路线导航类
  const driving = new AMap.Driving({
    map: map,
    province:'津',
    number:'ADZ3196',
    autoFitView:false
  })
  // 根据起终点名称规划驾车导航路线
  driving.search(
    [
      { keyword: '平谷区小渔阳', adcode: '110000' },
      { keyword: '顺义区第三小学', adcode: '110000' }
    ],
    function (status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        console.log('绘制驾车路线完成',result)
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    }
  )
}

var polyEditor = null
let polygon = null
const guanbi = () => {
  polyEditor.close()
  // debugger
  window.polyEditor = polyEditor
  window.polygon = polygon
  // window.polygon.getPath().map(item=>[item.lng,item.lat])
}
const drawLine = (AMap) => {
  const path = borderData.map((item) => {
    item.position.forEach((info) => (info._name = item.lineName))
    return item.position.filter(Boolean)
  })
  //  const path = [[116.6923,40.169957], [116.640717,40.17112], [116.476284, 40.000917]]
  polygon = new AMap.Polygon({
    
    path: path.flat(1),
    strokeColor:'#32a313',
    fillColor:'#ff0000',
    fillOpacity:0.4  })
  map.add([polygon])
  polyEditor = new AMap.PolygonEditor(map)
  polyEditor.addAdsorbPolygons([polygon])

  polygon.on('dblclick', () => {
    polyEditor.setTarget(polygon)
    polyEditor.open()
  })

  borderData.forEach((item) => {
    const middleIndex = Math.floor(item.position.length / 2)
    const middlePos = item.lineNamePos
      ? item.lineNamePos
      : item.position[middleIndex]

    const text = new AMap.Text({
      text: item.lineName,
      anchor: 'center', // 设置文本标记锚点
      position: middlePos
    })
    text.setMap(map)
  })

  {
    console.log(limitTip);
    const text = new AMap.Text({
        text: limitTip.replace(/^\n|\n$/mg,'').replace(/\n/mg,'<br/>'),
        anchor: 'center', // 设置文本标记锚点
        position: polygon.getBounds().getCenter(),
        zIndex:3,
        style:{
          'text-align':'center',
          color:'#000',
          'font-size':'2em',
          'font-weight':'bold',
          'text-shadow': '-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff',
          'background-color':'transparent',
          'border':'none'

        }
      })
      text.setMap(map)
  }

  // 缩放地图到合适的视野级别
  map.setFitView()
}

onUnmounted(() => {
  map?.destroy()
})
</script>

<style lang="less">
.map-page {
  width: 100%;
  height: 100%;
  button {
    position: fixed;
    top: 20px;
    right: 20px;
  }
}
#map-container {
  width: 100%;
  height: 100%;
}
</style>
